<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>{:C('PRO_TITLE')} - 用户注册</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta content="{:C('PRO_TITLE')}" name="description" />

  <!-- App favicon -->
  <link rel="shortcut icon" href="__PUBLIC__/assets/images/favicon.ico">

  <!-- App css -->
  <link href="__PUBLIC__/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <link href="__PUBLIC__/assets/css/icons.css" rel="stylesheet" type="text/css" />
  <link href="__PUBLIC__/assets/css/metismenu.min.css" rel="stylesheet" type="text/css" />
  <link href="__PUBLIC__/assets/css/style.css" rel="stylesheet" type="text/css" />
  <link href="__PUBLIC__/assets/plugins/toast/jquery.toast.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="__PUBLIC__/assets/plugins/jquery-editable-select/jquery-editable-select.min.css" />

</head>

<body class="account-body">
  <iframe name="ajaxifr" style="display:none;"></iframe>
  <!-- Log In page -->
  <div class="row vh-100">
    <div class="col-lg-3  pr-0">
      <div class="card mb-0 shadow-none">
        <div class="card-body">

          <div class="px-3">
            <div class="media">
              <a href="index.html" class="logo logo-admin">
                <!-- <img src="__PUBLIC__/assets/images/logo-sm.png" height="55" alt="logo"
                  class="my-3" --></a>
              <div class="media-body ml-3 align-self-center">
                <h4 class="mt-0 mb-1">免费注册</h4>
                <p class="text-muted mb-0">立即获得账号.</p>
              </div>
            </div>

            <form id="signupForm" class="form-horizontal my-4" method="post" action="__ACTION__" autocomplete="off" target="ajaxifr">

              <div class="form-group">
                <label for="username">用户名称</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon1"><i class="mdi mdi-account-outline font-16"></i></span>
                  </div>
                  <input type="text" class="form-control" id="username" name="username" placeholder="用户名称">
                </div>
              </div>

              <div class="form-group">
                <label for="email">Email</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon5"><i class="mdi mdi-email-outline font-16"></i></span>
                  </div>
                  <input type="email" class="form-control" id="email" name="email" placeholder="邮件地址">
                </div>
              </div>

              <div class="form-group">
                <label for="company">公司名称</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon2"><i class="mdi mdi-office-building font-16"></i></span>
                  </div>
                  <!--<input type="text" class="form-control" id="company" name="company"  placeholder="公司名称"> -->
                  <select class="form-control" id="company" name="company"  placeholder="公司名称">
                       <volist name="companys" id="company_name" key="k">
                        <option>{$company_name}</option>
                       </volist>
                    </select>
                  
                </div>
              </div>

              <div class="form-group">
                <label for="password">密码</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon3"><i class="mdi mdi-lock-outline font-16"></i></span>
                  </div>
                  <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>
              </div>

              <div class="form-group">
                <label for="repassword">确认密码</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon4"><i class="mdi mdi-key font-16"></i></span>
                  </div>
                  <input type="password" class="form-control" id="repassword" name="repassword" placeholder="确认密码">
                </div>
              </div>

              <div class="form-group">
                <label for="phone">电话号码</label>
                <div class="input-group mb-3">
                  <div class="input-group-prepend">
                    <span class="input-group-text" id="basic-addon5"><i class="mdi mdi-cellphone-iphone font-16"></i></span>
                  </div>
                  <input type="text" class="form-control" id="phone" name="phone" placeholder="电话号码">
                </div>
              </div>

              <div class="form-group mb-0 row">
                <div class="col-12 mt-2">
                  <button class="btn btn-primary btn-block waves-effect waves-light" type="submit">注册 <i class="fas fa-sign-in-alt ml-1"></i></button>
                </div>
              </div>
            </form>

          </div>

          <div class="m-3 text-center bg-light p-3 text-primary">
            <h5 class="">已经有账号 ? </h5>
            <p class="font-13">现在登录</p>
            <a href="{:U('login')}" class="btn btn-primary btn-round waves-effect waves-light px-3">登录</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-9 p-0 d-flex justify-content-center">
      <div class="accountbg d-flex align-items-center">
        <div class="account-title text-white text-center">
          <img src="__PUBLIC__/assets/images/logo-sm.png" alt="" class="thumb-sm">
          <h4 class="mt-3">欢迎使用</h4>
          <div class="border w-25 mx-auto border-primary"></div>
          <h1 class="">{:C('PRO_TITLE')}</h1>
          <p class="font-14 mt-3">已经有账号 ? <a href="{:U('login')}" class="text-primary">登录</a></p>

        </div>
      </div>
    </div>
  </div>
  <!-- End Log In page -->

  <!-- jQuery  -->
  <script src="__PUBLIC__/assets/js/jquery.min.js"></script>
  <script src="__PUBLIC__/assets/js/bootstrap.bundle.min.js"></script>
  <script src="__PUBLIC__/assets/js/metisMenu.min.js"></script>
  <script src="__PUBLIC__/assets/js/waves.min.js"></script>
  <script src="__PUBLIC__/assets/js/jquery.slimscroll.min.js"></script>

  <!-- App js -->
  <script src="__PUBLIC__/assets/js/app.js"></script>

  <script src="__PUBLIC__/assets/js/jquery.validate.js"></script>
  <script src="__PUBLIC__/assets/js/messages_zh.js"></script>
  <script src="__PUBLIC__/assets/plugins/toast/jquery.toast.min.js"></script>
  
  <script src="__PUBLIC__/assets/plugins/jquery-editable-select/jquery-editable-select.min.js"></script>

  <script>
  $('#company').editableSelect();
  
  $.validator.setDefaults( {
    submitHandler: function () {
      document.getElementById('signupForm').submit();
    }
  } );
  
  jQuery.validator.addMethod("isZipCode", function(value, element) {   
      var tel = /^[0-9]{6}$/;
      return this.optional(element) || (tel.test(value));
  }, "请正确填写您的邮政编码");
  
  $( document ).ready( function () {
    $( "#signupForm" ).validate( {
      rules: {
        username: {
                required: true,
                minlength: 2
              },
        company: "required",
        password: {
                required: true,
                minlength: 5
              },
        repassword: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        },
        email: {
                required: true,
                email:true
              },
      },
      messages: {
        username: "用户名称必填",
        company: "公司名称必填",
        password: {
          required: "请输入密码",
          minlength: "密码长度不能小于 5 个字母",
        },
        repassword: {
          required: "请输入确认密码",
          minlength: "密码长度不能小于 5 个字母",
          equalTo: "两次密码输入不一致"
        },
        email: {
          required: "请输入Email",
        },
      },
      errorElement: "em",
      errorPlacement: function ( error, element ) {
        // Add the `help-block` class to the error element
        error.addClass( "help-block" );

        if ( element.prop( "type" ) === "checkbox" || element.prop( "type" ) === "radio" ) {
          error.appendTo( element.closest( ".col-sm-5" ) );
        } else if (element.hasClass('form-control')){
          error.insertAfter(element.closest( ".input-group" ));
        } else {
          error.insertAfter( element );
        }
      },
      highlight: function ( element, errorClass, validClass ) {
        $( element ).parents( ".input-group" ).addClass( "has-error" ).removeClass( "has-success" );
      },
      unhighlight: function (element, errorClass, validClass) {
        $( element ).parents( ".input-group" ).addClass( "has-success" ).removeClass( "has-error" );
      }
    } );
  } );

function notify(status, title, content){
  $.toast({
    heading: title,
    text: content,
    showHideTransition: 'slide',
    icon: status,
    position: 'top-right',
  })
}
  </script>
</body>

</html>